<!DOCTYPE html>
    <html style="overflow-y:hidden">
	<head>
		<meta charset=" UTF-8 ">
		<title>员工日志</title>
		<meta name="viewport " content="width=device-width, initial-scale=1.0 ">
   		<meta name="renderer " content="webkit ">
   		
	    <link href="libs/bootstrap.css " rel="stylesheet ">
	    <link href="libs/font-awesome.css " rel="stylesheet ">
	    <link href="libs/fullcalendar/fullcalendar.css " rel="stylesheet "/>
	   	<link href="libs/base.css " rel="stylesheet "/>
	    <style>
			body {
				padding: 0;
				font-family: "Lucida Grande ",Helvetica,Arial,Verdana,sans-serif;
				font-size: 14px;
			}
			.container{
				height:100%;
				overflow-y:hidden;
			}
			#calendar{  
				max-width: 1500px;
				margin: 0 auto;
			}	 
			#Form{
				overflow-x:hidden;
			}
			#startTime,#endTime,#allDay{
				width:120px;
				border:none;
			}
		</style>
	</head>
	<body>
		<div class="row nowpos ">
			<li class="col-sm-12 "><i class="glyphicon glyphicon-home "></i>所在位置：<a href="# ">我的工作</a>>><a href="#
                    ">员工日志</a>>><a href="# ">一周日志查看</a></li>
		</div>
		<div class="container ">
			<div class="mainbox row ">
				<li class="col-sm-12 titlenav ">日程安排界面</li>
				<div id="calendar "> </div>
				<div class="layer-hidden-line ">
			        <form role="form " class="m-t-form " id="Form " >
			            <input name="id " id="id " type="hidden " value=" ">
			            <div class="row ">
			            	<div class="col-xs-1 "></div>
			                <div class="col-xs-11 layer-condensed-case ">
			                    <div class="form-group ">
			                        <label for="classroomId "> 日程内容 </label> 
			                        <select name="status " id="status" value="未完成 " style="float:right;height:30px;margin:3px 7px
                    0; ">
			                        	<option value="未完成">未完成</option>
			                        	<option value="已完成">已完成</option>
			                        </select>
			                        <span class="input-icon icon-left "> 
			                            <textarea class="form-control " id="content " name="title "
			                            placeholder="请输入日程内容 " data-required="true "
			                            data-descriptions="content " maxlength="50 " autoComplete='off'> </textarea>
			                            <i class="spl-icon-book-open "> </i>
			                        </span>
			                    </div>
			                </div>
			                <div class="col-xs-1 "></div>
			            </div>
			            <div class="row ">
			            	<div class="col-xs-1 "></div>
			            	<div class="col-xs-11 layer-condensed-case timeselect ">
			            		<input type="text " readonly="readonly "id="startTime " name="start "
			                           data-descriptions="startTime " maxlength="50
                    " autoComplete='off'>&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;<input type="text " 
			                           readonly="readonly " id="endTime " name="end " maxlength="50 "> 
			            	</div>
			            	<div class="col-xs-11 layer-condensed-case allday " style="display:none; ">
			            		<input type="text " readonly="readonly " id="allDay " name="allDay "
			                           data-descriptions="allDay " maxlength="50 " autoComplete='off'> 
			            	</div>
			            	<div class="col-xs-1 "></div>
			            </div>
			            <div class="col-sm-12 form-group tcenter ">
			            	<input type="button " id="del " style="display: none; " value="删除 " />
							<input type="submit " id=" " value="提交 " />
							<input type="button " id="quit " value="取消 " />
						</div>
			        </form>
			    </div>
			</div>
		</div>
		<script src="libs/jquery-2.1.1.min.js "></script>
		<script src="libs/jquery.mvalidate.js "></script>
		<script src="libs/jquery-ui-1.10.2.custom.min.js "></script>
		<script src="libs/fullcalendar/moment.min.js "></script>
		<script src="libs/fullcalendar/fullcalendar.js "></script>
		<script src="libs/jquery.formautofill.js "></script>
		<script src="layer/layer.js " charset="utf-8 "></script>
		<script type="text/javascript ">
		$(function(){
		    initFullCalendar();
		    initForm();
		});
		//页面加载完初始化日历   
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		var nowData=" ";
		
		var mon=m+" ";
		var day=d+" ";
       	if(mon.length=="1 "){
       		nowData = y+"-0 "+(date.getMonth()+1);
       	}else{
       		nowData = y+"- "+(date.getMonth()+1);
       	}
       	if(day.length=="1 "){
       		nowData = nowData+"-0 "+date.getDate();
       	}else{
       		nowData = nowData+"- "+date.getDate();
       	}
       	
		//打开新增弹出层
		function openLayer(selectStart,selectEnd){
		    $("#id ").val(" ");
		    $("#del ").hide();
		    $('#Form')[0].reset();
		    $('#startTime').val(selectStart);
		    $('#endTime').val(selectEnd);
		    layer.open({
		        title : '<i class="fa fa-plus "></i>&nbsp;新增日程',
		        type : 1,
		        fix : false,
		        skin : 'layui-layer-rim',
		        area : [ '400px', '250px' ],
		        content : $('#Form')
		    }); 
		}
		//打开修改弹出层
		function openEditLayer(data){
			$("#id ").val(data.id);
		    $("#del ").show();
		    $('#Form')[0].reset();
		    $('#Form').autofill(data);
		    $('#startTime').val(formatDate(data.start));
		    $('#endTime').val(formatDate(data.end));
		    layer.open({
		        type : 1,
		        fix : false,
		        skin : 'layui-layer-rim',
		        area : [ '400px', '250px' ],
		        content : $('#Form')
		    });
		}
		
		var if_allday=false; //用于判断选中的是否为整天
		//初始化日程视图
		function initFullCalendar(){
		    $('#calendar').fullCalendar({
		        header: {
		            left: 'prev,next today',
		            center: 'title',
		            right: 'month,agendaWeek,agendaDay'
		        },
		        defaultView: 'agendaWeek', //默认显示周视图
		        defaultDate: nowData,
		        
				monthNames:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				monthNamesShort:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				dayNames:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
				dayNamesShort:['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				
				allDayText:'跨天',
				slotMinutes:30,
				timeFormat: 'H:mm',
		        axisFormat: 'H(:mm)tt',
				minTime:"08:00:00 ",  
				maxTime:"18:00:00 ",
				timezone:"local ",
				weekNumberTitle:'W',
				
		        editable: false,
		        firstDay:1,
		        selectable:true,
		        unselectAuto:true,
		        unselectCancel:".layui-layer ",
		       	events:  {      //加载列表
	                url: '<%=basePath%>employeLog/list',   //加载数据列表后台地址
	                cache: true
	            },   
	            selectHelper:true, //设置可拖动选择区域
	            select:function(startDate, endDate, allDay, jsEvent, view){ //拖动选择区域后触发事件
	            	if((startDate-endDate)%86400==0){  //判断是否为整天
	            		if_allday=true;
	            	}
	            	var views = $('#calendar').fullCalendar('getView');
	            	openLayer(formatDate(startDate),formatDate(endDate));
	            },
		        eventClick:function(event, jsEvent, view){//当点击日历中的某一日程（事件）时，触发此操作
		            openEditLayer(event);
		        }
		    });
		}
		
		function formatTen(num) { 
			return num > 9 ? (num + " ") : ("0 " + num); 
		} 
		
		//日期格式化
		function formatDate(date) { 
			var d = new Date(date);
			var year = d.getFullYear(); 
			var month = d.getMonth() + 1; 
			var day = d.getDate(); 
			var hour = d.getHours();
			var minute = d.getMinutes(); 
			return year + "- " + formatTen(month) + "- " + formatTen(day) + " " + formatTen(hour) + ": " + formatTen(minute); 
		} 
		//进入下一个月视图
		function next(){
		    $('#calendar').fullCalendar('next'); 
		}
		//初始化表单
		function initForm(){
		    $("#Form ").mvalidate({   //表单验证
		        type: 2,   //1表示弹框提示信息，2表示在表单下面提示信息
		        validateInSubmit:true, //点击提交时是否对表单进行验证
		        onKeyup: true, 
		        sendForm: true,
		        autoFocus: true,
		        firstInvalidFocus: true, //未通过验证的第一个元素自动获得焦点
		        // 点击提交按钮时,表单通过验证触发函数
		        valid: function(event, options) {  //点击提交按钮，若表单通过验证即触发该事件
		            var obj=$('#Form').serializeObject();
		            obj.allDay=if_allday;
		            if(obj.id==null||obj.id==''){ //表示新增
		                $.ajax({//获取数据
			                type : "post ",
			                url : '<%=basePath%>/employeLog/save',
			                data: obj,
			                dataType : 'json',
			                success: function(data) {
			                    $('#calendar').fullCalendar('renderEvent', obj, true);
			                 }
			            });
		             }else{
		            	$.ajax({//获取数据
			                type : "post ",
			                url : '<%=basePath%>/employeLog/edit',
			                data: obj,
			                dataType : 'json',
			                success : function(data) {
			                    $('#calendar').fullCalendar('updateEvent', obj);
			                 }
			            });
		             } 	
		        },
		        // 点击提交按钮时,表单未通过验证触发函数
		        invalid: function(event, status, options) {  //点击提交按钮，若表单未通过验证即触发该事件
		        	layer.msg("日程内容不能为空！ ", { icon: 0 });
		        },
		        // 点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
		        eachField: function(event, status, options) {
		
		        },
		        eachValidField: function(val) {},
		        eachInvalidField: function(event, status, options) {},
		        conditional: {
		
		        },
		        descriptions : {
			        content : {
			            required : '<i class="spl-icon-volume-1 "></i>&nbsp;请填写日程内容'
			        }
		        }
		    });
		}
		
		//表单
		$.fn.serializeObject = function() {
	      var o = {};
	      var a = this.serializeArray();
	      $.each(a, function() {
	          if (o[this.name] !== undefined) {
	              if (!o[this.name].push) {
	                  o[this.name] = [o[this.name]];
	              }
	              o[this.name].push(this.value || '');
	          } else {
	              o[this.name] = this.value || '';
	          }
	      });
	      return o;
	    };
	    
	    //删除
		$("#del ").click(function(){
			var id=$("#id ").val();
		    layer.confirm('您确定删除该日程吗?', function(){ 
		        $.ajax({//获取数据
		            type : "POST ",
		            url : '<%=basePath%>/employeLog/delete?id='+id,
		            dataType : 'json',
		            success : function(data) {
		            }
		        });
		        layer.closeAll();
		        layer.msg("删除成功！ ", { time : 2000, icon : 1});
		        $('#calendar').fullCalendar('removeEvents', id);
		    });
		});
		$("#quit ").click(function(){
			layer.closeAll();
		});
		</script>
	</body>
</html>
